<template>
    <view class="hy-grid">
        <u-grid :col="col" :border="false">
            <u-grid-item v-for="(item, index) in gridItems" :key="index" @click="item.onClick">
                <template v-if="item.iconLibrary === 'vant'">
                    <van-icon :name="item.icon" :size="item.size"/>
                </template>
                <template v-else-if="item.iconLibrary === 'uview'">
                    <u-icon :name="item.icon" :size="item.size"/>
                </template>
                <view class="grid-text">{{ item.text }}</view>
            </u-grid-item>
        </u-grid>
    </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

interface GridItem {
    icon: string;
    text: string;
    size: number;
  
    onClick: () => void;
    iconLibrary: 'vant' | 'uview';
}

const props = defineProps<{
    gridItems: GridItem[];
    col:number;
}>();
</script>

<style scoped>
:deep(.u-grid ) {
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
}
.hy-grid{
    background-color: #fff;
}
</style>